import styled from '@emotion/styled'
import React from 'react'
import { Button, Spin, Typography } from 'antd'
import { DevTools } from 'jira-dev-tool'

// Row 封装
export const Row = styled.div<{
  gap?: number | boolean // 是否 gap
  between?: boolean // 是否平均分布
  marginBottom?: number // 外边距
}>`
  display: flex;
  align-items: center;
  justify-content: ${(props) => (props.between ? 'space-between' : undefined)};
  margin-bottom: ${(props) => props.marginBottom + 'rem'};
  // 子元素
  > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-right: ${(props) => {
      return typeof props.gap === 'number'
        ? props.gap + 'rem' // 如果是数字填充单位
        : props.gap // 如果是布尔值，直接填充
        ? '2rem'
        : undefined
    }};
  }
`
const FullPage = styled.div`
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
`
// loading
export const FullPageLoading = () => (
  <FullPage>
    <Spin size={'large'} />
  </FullPage>
)
// error
export const FullPageErrorFallback = ({ error }: { error: Error | null }) => (
  <FullPage>
    <DevTools />
    <ErrorBox error={error} />
  </FullPage>
)

// 类型守卫
const isError = (value: any): value is Error => value?.message
export const ErrorBox = ({ error }: { error: unknown }) => {
  if (isError(error)) return <Typography.Text type="danger">{error?.message}</Typography.Text>
  return null
}

export const ButtonNoPadding = styled(Button)`
  padding: 0;
`
export const ScreenContainer = styled.div`
  padding: 3.2rem;
  width: 100%;
  display: flex;
  flex-direction: column;
`
